<template>
    <div class="container">
        <div class="toolboxContainer">
            <my-drag class="myToolbox" id="toolbox1" target="#map3d" handle=".el-card__header">
                <el-card shadow="hover" :body-style="{ padding: '0 15px' }">
                    <div slot="header" class="clearfix">
                        <span><i class="header-icon el-icon-set-up"></i>　工具箱-1</span>
                    </div>
                    <div class="text item">
                        <el-collapse v-model="activeNames" @change="doSthWhenCollapseChanged" style="border-top: none;">
                            <!-- -->
                            <el-collapse-item name="symbolEntities">
                                <template slot="title">
                                    <i class="header-icon el-icon-map-location"></i>　符号标注
                                </template>
                                <el-checkbox @change="toggleShowOrHideBeijingPositionBillboard"
                                             v-model="isBeijingPositionBillboardChecked"
                                             label="标注北京位置">
                                </el-checkbox>
                                <el-checkbox-group size="mini">
                                    <el-checkbox label="xx选项1" disabled></el-checkbox>
                                    <el-checkbox label="xx选项2" disabled></el-checkbox>
                                </el-checkbox-group>
                            </el-collapse-item>
                            <!-- -->
                            <el-collapse-item name="watermarkOptions">
                                <template slot="title">
                                    <i class="header-icon el-icon-magic-stick"></i>　水印设置
                                </template>
                                <label>
                                    <input type="checkbox" @change="toggleShowOrHideCompanyLogo" v-model="isCompanyLogoChecked"/>添加公司logo水印
                                </label>
                                <div v-show="isCompanyLogoChecked">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td class="mySliderLabelText">水印不透明度：</td>
                                            <td class="mySlider">
                                                <el-slider v-model="intLogoLayerAlpha" :format-tooltip="mySliderFormat"
                                                           @input="setCompanyLogoLayerAlpha">
                                                </el-slider>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                        <!-- -->
                        <div v-if="activeNames.length >= 2" class="text item">
                            <el-button type="text" style="width:100%;height:20px;font-size:10px;padding:0;" @click="collapseAll">
                                <i class="el-icon-caret-top"></i> 全部收起
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </my-drag>
        </div>

        <div class="mapTest">
            <div id="map3d">
            </div>
        </div>
    </div>
</template>

<script>
import MyDrag from '../components/MyDrag.vue'
import * as Cesium from 'cesium'
const VIEW_RECTANGLE= Cesium.Rectangle.fromDegrees(100, 10, 120, 70);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = VIEW_RECTANGLE;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.3
// // TODO: 是否需要可配置Cesiumion API服务访问令牌？
// import {getCesiumAccessToken} from '@/util.js'
// console.log(Cesium.Ion.defaultAccessToken)
// const TOKEN = getCesiumAccessToken();
// if (TOKEN) {
//   Cesium.Ion.defaultAccessToken = TOKEN
// }
// console.log(Cesium.Ion.defaultAccessToken)

import STAR_PNG from '@/assets/images/star.png'
import LOGO_PNG from '@/assets/images/logo.png'

const DEFAULT_ALPHA = 100 // 不透明度，取值范围整数0-100对应：0%=完全透明；100%=不透明
export default {
    components: {
        MyDrag,
    },
    data() {
        return {
            activeNames: [],
            map3d: null,
            url: "",
            attr: "",
            intLogoLayerAlpha: DEFAULT_ALPHA, // 整数不透明度，取值范围0-100对应：0%=完全透明；100%=不透明
            logoLayerAlpha: (DEFAULT_ALPHA % 101) * 0.01,// 浮点数不透明度，取值范围0-1.00
            logoLayer: null,
            logoLayerProvider: null,
            isCompanyLogoChecked: true,
            isBeijingPositionBillboardChecked: true,
            myEntities: {
                beijing: null,
                zhengzhou: null,
            },
            viewer: null,
        }
    },
    methods: {
        collapseAll() {
            this.activeNames = []
        },
        doSthWhenCollapseChanged(val) {
            // console.log(val);
        },
        mySliderFormat(value){
            if (value) {
                return value.toString() + '%'
            }
            return '0%'
        },
        setCompanyLogoLayerAlpha() {
            this.logoLayerAlpha = (this.intLogoLayerAlpha % 101)* 0.01
            if (!this.isCompanyLogoChecked) {
                return
            }
            this.logoLayer.alpha = this.logoLayerAlpha
        },
        toggleShowOrHideCompanyLogo() {
            let layers = this.viewer.scene.imageryLayers
            if (!this.isCompanyLogoChecked) {
                layers.remove(this.logoLayer, true)
                this.logoLayer = null
                return
            }
            this.logoLayer = layers.addImageryProvider(this.logoLayerProvider)
            this.logoLayer.alpha = this.logoLayerAlpha
        },
        toggleShowOrHideBeijingPositionBillboard() {
            let entities = this.viewer.entities
            if (!this.isBeijingPositionBillboardChecked) {
                entities.remove(this.myEntities.beijing)
                entities.remove(this.myEntities.zhengzhou)
                return
            }
            entities.add(this.myEntities.beijing)
            entities.add(this.myEntities.zhengzhou)
        },

    },
    created(){

    },
    mounted() {
        // // 获取来自因特网的高程数据
        // let worldTerrain = Cesium.createWorldTerrain({
        //   requestWaterMask: true,
        //   requestVertexNormals: true,
        // });
        // 引用本机（水经注WeServer服务器）发布的高程数据
        // let terrain = new Cesium.CesiumTerrainProvider({
        //   url: '/static/TerrainProvider',
        //   isGoogleCustom: true
        // });

        // 加载影像瓦片
        let imageprovider = new Cesium.WebMapTileServiceImageryProvider({
            //url: 'http://192.168.1.168:8080/geoserver/gwc/service/wmts',
            //url: 'http://10.173.45.50/geoserver/gwc/service/wmts',
            url: 'http://fw1.qdlab.top:7981/geoserver' + '/gwc/service/wmts',
            layer: 'China',
            style: '',
            format: 'image/jpeg',
            tileMatrixSetID: 'EPSG:3857',
            //tileMatrixLabels: ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
            credit: new Cesium.Credit('卫星影像提供商某某公司A 甲测资字12345-A'),
            minimumLevel: 1,
            maximumLevel: 15
        });

        let viewer = new Cesium.Viewer("map3d", {
            imageryProvider: new Cesium.TileMapServiceImageryProvider({
                url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
            }),
            // terrainProvider: worldTerrain,// terrainProvider: terrain,
            animation: false,//是否创建动画小器件，左下角仪表
            timeline: false,//是否显示时间轴
            sceneModePicker: true,//是否显示3D/2D选择器
            baseLayerPicker: false,//是否显示图层选择器
            geocoder: false,//是否显示geocoder小器件，右上角查询按钮
            scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
            navigationHelpButton: false,//是否显示右上角的帮助按钮
            homeButton: true,//是否显示Home按钮
            infoBox: true,//是否显示信息框
            showRenderLoopErrors: false//如果设为true，将在一个HTML面板中显示错误信息
        });
        //强制隐藏cesium控件版权信息
        viewer._cesiumWidget._creditContainer.style.display = "none";

        //调试信息：FPS帧数
        viewer.scene.debugShowFramesPerSecond = true;

        let layers = viewer.scene.imageryLayers;

        //叠加本地瓦片地图
        let tdtSatellite = new Cesium.ImageryLayer(imageprovider, {
            minimumTerrainLevel: 1,
            //maximumTerrainLevel: 15,
        })
        layers.add(tdtSatellite)

        //叠加logo图层
        this.logoLayerProvider = new Cesium.SingleTileImageryProvider({
            url: LOGO_PNG,
            rectangle: Cesium.Rectangle.fromDegrees(100.0, 40.0, 115.0, 41.75)
        })
        this.logoLayer = layers.addImageryProvider(this.logoLayerProvider)
        this.logoLayer.alpha = this.logoLayerAlpha

        // 添加entities例子: 北京和郑州
        this.myEntities.beijing = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(116.39, 39.9),
            name: "北京市区",
            billboard: {
                scale: 0.375,
                image: STAR_PNG,
                // sizeInMeters: true,
            },
            label: new Cesium.LabelGraphics({
                text: "北京",
                font: "24px sans-serif",
                horizontalOrigin: 1,
                outlineColor: new Cesium.Color(0, 0, 0, 1),
                outlineWidth: 2,
                pixelOffset: new Cesium.Cartesian2(17, -5),
                disableDepthTestDistance: Number.POSITIVE_INFINITY, //备注:避免3D图层遮挡label文字
                style: Cesium.LabelStyle.FILL,
            })
        });
        this.myEntities.zhengzhou = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(113.65,34.77),
            name: "郑州市区",
            billboard: {
                scale: 0.375,
                image: STAR_PNG,
                // sizeInMeters: true,
            },
            label: new Cesium.LabelGraphics({
                text: "郑州",
                font: "24px sans-serif",
                horizontalOrigin: 1,
                outlineColor: new Cesium.Color(0, 0, 0, 1),
                outlineWidth: 2,
                pixelOffset: new Cesium.Cartesian2(17, -5),
                disableDepthTestDistance: Number.POSITIVE_INFINITY, //备注:避免3D图层遮挡label文字
                style: Cesium.LabelStyle.FILL,
            })
        });
        this.viewer = viewer;
    }
}
</script>

<style lang="stylus" scoped>
@import 'cesium/Build/Cesium/Widgets/widgets.css'
.container
    position: relative
    height: 100%
    //border: 5px solid green

    .mapTest
        //border: 5px solid red
        height: 100%
        text-align: left
        #map3d
            height: 100%
            //border: 5px solid blue

    .box-card
        width: 300px

    .toolboxContainer
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

        .myToolbox
            user-select: none
            width: 220px
            //float: right
            left: 5px
            top: 5px

    #toolbox1
        z-index: 1
        table
            padding-right: 15px
            //border: solid black
            width: 100%
            td.mySliderLabelText
                text-align: right
                width: 60%
            td.mySlider
                width: 40%

</style>
